<template>
  <div class="app">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span>XXX管理系统平台</span>
        </div>
      </template>

      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <!-- prop="adminname"这个表单元素要遵守rules中adminname后面的校验规则 -->
        <el-form-item label="用户名" prop="adminname">
          <el-input v-model="ruleForm.adminname" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button @click="resetForm(ruleFormRef)">重输</el-button>
        </el-form-item>
      </el-form>

      <template #footer>2025 XX</template>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
// 引入lement-plus内置两个接口
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { loginReg } from '@/api/user'
import router from '@/router'

// TS接口，描述对象的属性和方法
interface RuleForm {
  adminname: string
  password: string
}
// reactive<泛型>
// reactive函数的泛型，限制了reactive参数和返回值的类型
// 表单中的数据对象（跟表中的input双向绑定）
const ruleForm = reactive<RuleForm>({
  adminname: '',
  password: '',
})
// ref<泛型>
// ref函数的泛型，限制了ref参数和返回值value属性的类型
// FormInstance是ElementPlus内置接口，限制了表单实例对象的属性和方法
// ruleFormRef获取的是el-form组件的实例对象
const ruleFormRef = ref<FormInstance>()
// FormRules<RuleForm>限制reactive函数参数和返回值的类型
// <RuleForm>为自己定义，限制子对象的类型
const rules = reactive<FormRules<RuleForm>>({
  // 定义表单中的校验规则
  adminname: [
    // 校验规则对象
    {
      required: true, // 是否必须，如果是，formitem前面会生成一个红色*号
      message: '请输入用户名', // 验证失败后的提示
      // 验证规则什么时候触发
      // blur（失焦时触发）
      // change（内容改变时触发）
      trigger: 'blur',
    },
    // 正则校验
    // ^-------------开头
    // [a-z]---------小写字母
    // [a-zA-Z]------大小写字母
    // $-------------结束
    // {2,14}--------2~14位
    // [a-zA-Z_0-9]--大小写字母或数字或下划线
    // 开头必须为字母，接着可以是字母数字下划线，整个字符串长度为3~15
    {
      pattern: /^[a-zA-Z][a-zA-Z_0-9]{2,14}$/,
      message: '开头必须为字母，接着可以是字母数字下划线，整个字符串长度为3~15',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // 长度校验规则
    { min: 3, max: 15, message: '请输入3~15位', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // formEl表单组件对象
  // formEl.validate触发验证规则
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('可以登录')
      // 调用登录接口
      loginReg(ruleForm.adminname, ruleForm.password).then((r) => {
        console.log(r.data)
        ElMessage(r.data.message)

        if ((r.data.code = 200)) {
          let token: string = r.data.data.token
          let adminid = r.data.data.adminid as string
          localStorage.setItem('xx-mall-b-token', token)
          localStorage.setItem('xx-mall-b-adminid', adminid)
          router.push('/')
        } else {
        }
      })
    } else {
      console.log('没有验证通过', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  // formEl表单组件对象
  if (!formEl) return
  // 重置表单中所有元素
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(@/assets/imgs/login-bg.jpg);
  .el-card {
    width: 500px;
    margin-top: -150px;
  }
}
</style>
